<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
         table td{
            border:1px solid #000;
            padding:3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>名称</td>
                    <td>描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- v-for=""  遍历， v-model   绑定输入框  -->
                <tr v-for="(l,i) in goods" :key="i">
                    <td>{{i+1}}</td>
                    <td> <input type="checkbox" v-model="l.check"> </td>
                    <td>{{l.title}}</td>
                    <td><img src="img/QQ图片20220107192950(1).jpg" alt="" width="100" height="50"></td>
                    <td>{{l.price}}</td>
                    <td> <input type="number" v-model.number="l.count"> </td>
                    <td>{{l.price  * l.count}}</td>
                    <td> <button @click="goods.splice(i,1)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                <label for="check">全选反选</label>
                <input type="checkbox" id="check" v-model="quan">
            </p>
            <p>
                <button @click="Deletecheck">删除选中</button>
            </p>
            <p>
                选中数量: {{Checkcount}} - {{icount}}  /  总数量 : {{Allcount}} - {{Allicount}}
            </p>
            <p>
                选中价值: {{Checkprice}} - {{iprice}}  /  总价值 : {{Allprice}} - {{Alliprice}}
            </p>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data:{
                title:"v-model 实现简易的购物车",
            goods:[
                {check:false,title:"上衣",price:200,count:10},
                {check:true,title:"裤子",price:100,count:10},
                {check:false,title:"鞋子",price:500,count:10},
                {check:false,title:"风衣",price:1000,count:10},
                {check:false,title:"帽子",price:300,count:10},
                {check:false,title:"西服",price:2000,count:10},
            ],
            Checkcount:0,
            Allcount:0,
            Checkprice:0,
            Allprice:0,
        },
        watch:{
                // goods(v){
                //     console.log(v)
                // }
                // 深度监听
                goods:{
                    deep:true, // 深度监听
                    handler(v){
                        console.log(v)
                        this.Allcount = 0
                        this.Allprice = 0
                        this.Checkprice = 0
                        this.Checkcount = 0;
                        v.forEach(item=>{
                            this.Allcount+= item.count;
                            this.Allprice += item.count * item.price 
                            if(item.check){
                                this.Checkcount += item.count;
                                this.Checkprice += item.count * item.price 
                            }
                        })
                    }
                }
            },
        computed:{
            Allicount(){
                    var total = 0
                    this.goods.forEach(item=>{
                        total+=item.count 
                    })
                    return total 
                },
                icount(){
                    var total = 0
                    this.goods.forEach(item=>{
                        if(item.check) {
                            total+=item.count 
                        }
                    })
                    return total 
                },
                Alliprice(){
                    var total = 0
                    this.goods.forEach(item=>{
                        total+=item.count * item.price 
                    })
                    return total  
                },
                iprice(){
                    var total = 0
                    this.goods.forEach(item=>{
                        if(item.check) {
                            total+=item.count  * item.price 
                        }
                    })
                    return total 
                },
            quan:{
                get(){
                    return this.goods.every(item=>item.check)
                },
                set(v){
                    console.log(v);
                    this.goods=this.goods.map(item=>{item.check=v;
                    return item
                    })
                }
            }
        },
        methods:{
            Deletecheck(){
                this.goods=this.goods.filter(item=>!item.check)
                // check true 删除
                // check false 保留
            }
        },
        mounted(){
            document.getElementsByTagName("title")[0].innerHTML=this.title

            this.goods.forEach((item)=>{
                    this.Allcount+= item.count;
                    this.Allprice += item.count * item.price 

                    if(item.check){
                        this.Checkcount += item.count;
                        this.Checkprice += item.count * item.price 
                    }
                })
        }
    }).$mount("#app")






    </script>
</body>
</html>